<template>
    <div>
        <NavTop />
        <div style="width: 1400px;margin: auto;">
        <el-table :data="tableData" :border="parentBorder" style="width: 100%">
            <el-table-column type="expand">
            <template #default="props">
                <div m="4">
                <el-table :data="props.row.child" :border="childBorder">
                    <el-table-column label="商品编号" prop="id" />
                    <el-table-column label="商品名称" prop="name" />
                    <el-table-column label="价格" prop="price" />
                    <el-table-column label="优惠价格" prop="onlineprice" />
                    <el-table-column label="数量" prop="num" />
                    <el-table-column label="总金额" prop="total" />
                </el-table>
                </div>
            </template>
            </el-table-column>
            <el-table-column label="订单编号" prop="orderID" width="220" />
            <el-table-column label="订单日期" prop="time" width="520" />
            <el-table-column label="订单数量" prop="num" width="220" />
            <el-table-column label="订单金额" prop="sum" width="220" />
            <el-table-column align="right">
                <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
            <template #default="scope">
                <!-- 两个按钮不是同时显示，它根据订单中的isOrdered变量的值动态显示 -->
                <el-button
                size="small"
                type="danger"
                @click="pay(scope.$index)" v-if="!scope.row.isOrdered"
                >
                支付
                </el-button>
                <el-button
                size="small"
                type="success"
                disabled v-else
                >
                已支付
                </el-button>
                <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index)"
                >
                删除
                </el-button>
            </template>
            </el-table-column>
        </el-table>
        </div>
    </div>
</template>

<script>
import NavTop from '../../components/NavTop'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    components:{
        NavTop
    },
    data() {
        return {
            tableData : JSON.parse(sessionStorage.getItem('order')),
        }
    },
    methods:{
        handleDelete(index){
            ElMessageBox.confirm(
                '确定要删除吗?',
                'Warning',
                {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                }
            )
                .then(() => {
                    this.tableData.splice(index,1)//把当前行数据进行删除，注意，我们只是在数组里面进行删除，sessionStorage里面没有变化
                    //更新session里面的数据
                    sessionStorage.setItem('order',JSON.stringify(this.tableData))
                })
                .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '删除取消',
                })
                })
        },
        pay(index){
            ElMessageBox.confirm(
                '确定要支付吗?',
                '提示',
                {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: '提示',
                }
            )
                .then(() => {
                    //此处假设已经跳转到支付页面完成支付,后期同学们可以在此处完成模拟支付页面的编写
            this.tableData[index].isOrdered=true
            sessionStorage.setItem('order',JSON.stringify(this.tableData))
                })
                .catch(() => {
                ElMessage({
                    type: '注意',
                    message: '支付取消',
                })
                })
        },
    }
}
</script>